function Counter(){
    document.querySelector('button.NavigationBtn.mark[this]').removeAttribute('this');
    document.querySelector('button.NavigationBtn.mark#Counter').toggleAttribute('this');
    const children = document.querySelector('div#Frame').children;
    for (var i = 0; i < children.length; i++){
        if (children[i].id != 'nohide'){
            children[i].classList.add('hide');
        }
    }
    document.querySelector('div#Frame div#Counter').classList.remove('hide');
    closeMenu();
    initCounterInterface();
}    

let count = 0

function generateCounterUnit(title, lastUpdate, num, cid){
    count = count + 1
    const this_count = `num${count.toString()}`
    const div = document.createElement("div");
    div.className = "countUnit";
    div.style.marginBottom = '10px'
    div.id = `c${cid}`
    div.setAttribute('cid',`${cid}`)
    //
    const titleH3 = document.createElement("h3");
    titleH3.className = "cuTitle";
    titleH3.textContent = title;
    div.appendChild(titleH3);
    //
    const updateSpan = document.createElement("span");
    updateSpan.className = "cuLastUpdate";
    updateSpan.textContent = `（Last Update: ${lastUpdate}）`;
    updateSpan.setAttribute('id', this_count)
    div.appendChild(updateSpan);
    //
    const rightDiv = document.createElement("div");
    rightDiv.className = "cuRight";
    div.appendChild(rightDiv);
    //
    const addBtn = document.createElement("button");
    addBtn.className = "cuAddBtn";
    rightDiv.appendChild(addBtn);
    //
    const addContainer = document.createElement("div");
    addContainer.className = "container";
    addBtn.appendChild(addContainer);
    //
    const addSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    addSvg.setAttribute("class", "icon");
    addSvg.setAttribute("viewBox", "0 0 1024 1024");
    addSvg.setAttribute("version", "1.1");
    addSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
    addSvg.setAttribute("width", "24");
    addSvg.setAttribute("height", "24");
    addContainer.appendChild(addSvg);
    //
    const addPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
    addPath.setAttribute("d", "M544 480h112a16 16 0 0 1 16 16v16a16 16 0 0 1-16 16h-112v112a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16v-112h-112a16 16 0 0 1-16-16v-16a16 16 0 0 1 16-16h112v-112a16 16 0 0 1 16-16h16a16 16 0 0 1 16 16v112z m-32 320c159.056 0 288-128.944 288-288s-128.944-288-288-288-288 128.944-288 288 128.944 288 288 288z m0 48c-185.568 0-336-150.432-336-336s150.432-336 336-336 336 150.432 336 336-150.432 336-336 336z");
    addPath.setAttribute("p-id", "4217");
    addSvg.appendChild(addPath);
    //
    const addText = document.createTextNode("Add 1");
    addContainer.appendChild(addText);
    //
    const numSpan = document.createElement("span");
    numSpan.className = "cuNum";
    numSpan.setAttribute('id', this_count)
    numSpan.textContent = num;
    rightDiv.appendChild(numSpan);
    //
    const minusBtn = document.createElement("button");
    minusBtn.className = "cuMinusBtn";
    rightDiv.appendChild(minusBtn);
    //
    const minusContainer = document.createElement("div");
    minusContainer.className = "container";
    minusBtn.appendChild(minusContainer);
    //
    const minusSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    minusSvg.setAttribute("class", "icon");
    minusSvg.setAttribute("viewBox", "0 0 1024 1024");
    minusSvg.setAttribute("version", "1.1");
    minusSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
    minusSvg.setAttribute("width", "16");
    minusSvg.setAttribute("height", "16");
    minusContainer.appendChild(minusSvg);
    //
    const minusPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
    minusPath.setAttribute("d", "M512 42.666667c259.2 0 469.333333 210.133333 469.333333 469.333333s-210.133333 469.333333-469.333333 469.333333S42.666667 771.2 42.666667 512 252.8 42.666667 512 42.666667z m0 64C288.149333 106.666667 106.666667 288.149333 106.666667 512s181.482667 405.333333 405.333333 405.333333 405.333333-181.482667 405.333333-405.333333S735.850667 106.666667 512 106.666667z m183.466667 362.666666c4.693333 0 8.533333 3.84 8.533333 8.533334v46.933333a8.533333 8.533333 0 0 1-8.533333 8.533333H349.866667a8.533333 8.533333 0 0 1-8.533334-8.533333v-46.933333c0-4.693333 3.84-8.533333 8.533334-8.533334h345.6z");
    minusPath.setAttribute("p-id", "5173");
    minusSvg.appendChild(minusPath);
    //
    const minusText = document.createTextNode("Minus 1");
    minusContainer.appendChild(minusText);
    //
    const resetBtn = document.createElement("button");
    resetBtn.className = "cuResetBtn";
    rightDiv.appendChild(resetBtn);
    //
    const resetContainer = document.createElement("div");
    resetContainer.className = "container";
    resetBtn.appendChild(resetContainer);
    //
    const resetSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    resetSvg.setAttribute("class", "icon");
    resetSvg.setAttribute("viewBox", "0 0 1024 1024");
    resetSvg.setAttribute("version", "1.1");
    resetSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
    resetSvg.setAttribute("width", "16");
    resetSvg.setAttribute("height", "16");
    resetContainer.appendChild(resetSvg);
    //
    const resetPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
    resetPath.setAttribute("d", "M808 602.9c-23.6 164.2-181.8 285.5-358.7 248.3C336.9 827.6 245.6 736.8 222 624.4c-40.3-192 92-361.8 290.4-361.8v99.2l248-148.8-248-148.8v99.2c-248 0-438 222.4-388.6 476.5 30.1 154.7 155 279.4 309.7 309.5C668 995 875.6 833.9 906.2 616.1c4.2-29.6-19.7-55.8-49.5-55.8h0.1c-24.7 0-45.3 18.2-48.8 42.6z");
    resetPath.setAttribute("p-id", "8008");
    resetSvg.appendChild(resetPath);
    //
    const resetText = document.createTextNode("Reset");
    resetContainer.appendChild(resetText);
    //
    addBtn.addEventListener('click', function(){
        onAdd(cid, this_count);
    });
    minusBtn.addEventListener('click', function(){
        onMinus(cid, this_count);
    })
    resetBtn.addEventListener('click', function(){
        onReset(cid, this_count);
    });
    //
    return div;
}

function onAdd(cid, count){
    var num = document.querySelector(`span#${count}.cuNum`).innerHTML
    num = parseInt(num)
    num = num + 1
    var cid = document.querySelector(`div#c${cid}.countUnit`).getAttribute('cid')
    callServer('/counter/setCounter',`counterCid=${cid}&counterValue=${num}&updateUserID=${localStorage.getItem('ID')}`, num, 'PATCH')
        .then(response => {
            if (response[0] != null){
                document.querySelector(`span#${count}.cuNum`).innerHTML = response[1]
                document.querySelector(`span#${count}.cuLastUpdate`).innerHTML = `（Last Update: ${localStorage.getItem('ID')}）`
            }
        })
    num = null; resp = null; cid = null
}

function onMinus(cid, count){
    var num = document.querySelector(`span#${count}.cuNum`).innerHTML
    num = parseInt(num)
    num = num - 1
    var cid = document.querySelector(`div#c${cid}.countUnit`).getAttribute('cid')
    callServer('/counter/setCounter',`counterCid=${cid}&counterValue=${num}&updateUserID=${localStorage.getItem('ID')}`, num, 'PATCH')
        .then(response => {
            if (response[0] != null){
                document.querySelector(`span#${count}.cuNum`).innerHTML = response[1]
                document.querySelector(`span#${count}.cuLastUpdate`).innerHTML = `（Last Update: ${localStorage.getItem('ID')}）`
            }
        })
    num = null; resp = null; cid = null
}

function onReset(cid, count){
    var num = document.querySelector(`span#${count}.cuNum`).innerHTML
    num = parseInt(num)
    num = 0
    var cid = document.querySelector(`div#c${cid}.countUnit`).getAttribute('cid')
    callServer('/counter/setCounter',`counterCid=${cid}&counterValue=${num}&updateUserID=${localStorage.getItem('ID')}`, num, 'PATCH')
        .then(response => {
            if (response[0] != null){
                document.querySelector(`span#${count}.cuNum`).innerHTML = response[1]
                document.querySelector(`span#${count}.cuLastUpdate`).innerHTML = `（Last Update: ${localStorage.getItem('ID')}）`
            }
        })
    num = null; resp = null; cid = null
}

function generateCounterTop(){
    const div = document.createElement('div');
    div.className = 'cTop';
    //
    const h1 = document.createElement('h1');
    h1.className = 'pageTitle';
    h1.textContent = 'Counter';
    //
    const pageRightDiv = document.createElement('div');
    pageRightDiv.className = 'pageRight';
    //
    const refetchButton = document.createElement('button');
    refetchButton.className = 'refetch';
    refetchButton.onclick = initCounterInterface;
    //
    const refetchContainerDiv = document.createElement('div');
    refetchContainerDiv.className = 'container';
    //
    const refetchSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    refetchSvg.setAttribute('class', 'icon');
    refetchSvg.setAttribute('viewBox', '0 0 1024 1024');
    refetchSvg.setAttribute('version', '1.1');
    refetchSvg.setAttribute('width', '24');
    refetchSvg.setAttribute('height', '24');
    //
    const refetchPath1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    refetchPath1.setAttribute('d', 'M395.776 641.664a19.392 19.392 0 0 0-6.368-12.384l-36.672-32.416a190.496 190.496 0 0 1 87.328-70.88c47.52-19.2 99.776-18.72 146.944 1.28s83.776 57.28 103.008 104.8a31.936 31.936 0 0 0 41.632 17.696 31.936 31.936 0 0 0 17.696-41.632 254.208 254.208 0 0 0-137.312-139.776 254.56 254.56 0 0 0-195.936-1.728 253.984 253.984 0 0 0-111.552 87.616l-37.408-33.088a19.168 19.168 0 0 0-31.808 16.384l12.576 119.68a19.2 19.2 0 0 0 21.088 17.088l109.696-11.52a19.2 19.2 0 0 0 17.088-21.12zM757.92 729.088l-109.216 15.36a19.2 19.2 0 0 0-9.536 33.856l34.496 28.416a190.816 190.816 0 0 1-236.672 74.016 190.592 190.592 0 0 1-102.976-104.768 32 32 0 1 0-59.36 23.936 254.272 254.272 0 0 0 137.344 139.776 255.232 255.232 0 0 0 100 20.48 255.744 255.744 0 0 0 95.904-18.752 254.592 254.592 0 0 0 115.872-93.408l41.408 34.112a19.2 19.2 0 0 0 31.2-17.472l-16.736-119.168a19.264 19.264 0 0 0-21.728-16.384z');
    refetchPath1.setAttribute('p-id', '5928');
    refetchSvg.appendChild(refetchPath1);
    //
    const refetchPath2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    refetchPath2.setAttribute('d', 'M808.192 262.592a320.16 320.16 0 0 0-592.352 0A238.592 238.592 0 0 0 32 496a240.32 240.32 0 0 0 130.976 213.888 32 32 0 1 0 29.12-57.024A176.192 176.192 0 0 1 96 496a175.04 175.04 0 0 1 148.48-173.888l19.04-2.976 6.24-18.24C305.248 197.472 402.592 128 512 128a256 256 0 0 1 242.208 172.896l6.272 18.24 19.04 2.976A175.04 175.04 0 0 1 928 496a176.128 176.128 0 0 1-96.128 156.896 32.064 32.064 0 0 0 29.12 57.024A240.416 240.416 0 0 0 992 496a238.592 238.592 0 0 0-183.808-233.408z')
    refetchPath2.setAttribute('p-id', '6403');
    refetchSvg.appendChild(refetchPath2);
    //
    const refetchText = document.createElement('div');
    refetchText.textContent = 'Refetch';
    //
    refetchContainerDiv.appendChild(refetchSvg);
    refetchContainerDiv.appendChild(refetchText);
    refetchButton.appendChild(refetchContainerDiv);
    //
    const editButton = document.createElement('button');
    editButton.className = 'Edit';
    editButton.onclick = function(){
        Settings()
    };
    //
    const editContainerDiv = document.createElement('div');
    editContainerDiv.className = 'container';
    //
    const editSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    editSvg.setAttribute('class', 'icon');
    editSvg.setAttribute('viewBox', '0 0 1024 1024');
    editSvg.setAttribute('version', '1.1');
    editSvg.setAttribute('width', '24');
    editSvg.setAttribute('height', '24');
    //
    const editPath1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    editPath1.setAttribute('d', 'M489.376 534.624a31.904 31.904 0 0 0 45.248 0l304-304a31.968 31.968 0 1 0-45.248-45.248l-304 304a31.968 31.968 0 0 0 0 45.248');
    editPath1.setAttribute('p-id', '4531');
    editSvg.appendChild(editPath1);
    //
    const editPath2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    editPath2.setAttribute('d', 'M832 480a32 32 0 0 0-32 32l0.256 288L224 800.256 223.744 224H512a32 32 0 0 0 0-64H223.744A63.84 63.84 0 0 0 160 223.744v576.512C160 835.392 188.608 864 223.744 864h576.512A63.84 63.84 0 0 0 864 800.256V512a32 32 0 0 0-32-32');
    editPath2.setAttribute('p-id', '4532');
    editSvg.appendChild(editPath2);
    //
    const editText = document.createElement('div');
    editText.textContent = 'Edit';
    //
    editContainerDiv.appendChild(editSvg);
    editContainerDiv.appendChild(editText);
    editButton.appendChild(editContainerDiv);
    //
    pageRightDiv.appendChild(refetchButton);
    pageRightDiv.appendChild(editButton);
    //
    div.appendChild(h1);
    div.appendChild(pageRightDiv);
    //
    return div
}

function initCounterInterface(){
    // Clear
    const counter = document.querySelector('div#Counter div.content')
    while (counter.firstChild){
            counter.removeChild(counter.firstChild);
    }
    // Put
    document.querySelector('div#Counter div.content').appendChild(generateCounterTop())
    callServer('/counter/getAllCounter',`updateUserID=${localStorage.getItem('ID')}`, null, 'GET')
        .then(response => {
            if (response[0].length == 0){
                const p = document.createElement('p')
                p.innerHTML = 'No counter units . . .'
                p.style.color = 'var(--color-5)'
                document.querySelector('div#Counter div.content').appendChild(p)
            } else {
                for (let i = 0; i < response[0].length; i++){
                    const div = generateCounterUnit(response[0][i].name, response[0][i].ID, response[0][i].value, response[0][i].cid)
                    document.querySelector('div#Counter div.content').appendChild(div)
                }
            }
        })
        .catch(status => {
            console.warn(`Request to server was rejected with HTTP Status: ${status}`)
            lyDialogType4(status)
        })
}

initCounterInterface()